<template>
    <div class="container">
        <statistics-header header-title="转 运 人 员 数 据 库"></statistics-header>
        <statistics-bar bar-type="transport" ref="statisticsBar" @getType="getType"></statistics-bar>
        <div class="report-content">
            <div class="search-group">
                <div class="left-content">
                    <div class="data-title">数据库信息</div>
<!--                    <dlq-search @search="search" :area-name="areaName"></dlq-search>-->
                </div>
<!--                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
            </div>
            <Row class="main-table">
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        highlight-hover-row
                        height="700"
                        size="medium"
                        show-overflow="tooltip"
                        :loading="tableLoading"
                        align="center"
                        header-align="center"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData"
                        :checkbox-config="{checkField: 'checked'}"
                        @cell-click="cellClickEvent">
                    <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" :width="item.width" :visible="item.visible"
                                      v-for="(item,index) in tableColumns" :key="index">
                    </vxe-table-column>
                </vxe-table>
            </Row>
            <Modal
                    v-model="disposalModal"
                    title="来沈航班"
                    @on-ok="disposalModalOk"
                    @on-cancel="disposalModal = false">
                <Table :columns="flight" :data="flightMap"></Table>
            </Modal>
            <br>
            <Row type="flex" justify="center">
                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </div>
    </div>
</template>
<script>
import {
  findzsryList, selectFindCount
} from '@/api/statistics-data-list'
// import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import StatisticsBar from '@/components/statistics-bar'
// import DlqSearch from '@/components/search'
export default {
  components: { StatisticsBar, StatisticsHeader
    // DlqSearch
  },
  data () {
    return {
      areaName: '',
      itemStyle: [
        'item-style01',
        'item-style02',
        'item-style03',
        'item-style04'
      ],
      totalnum: 0,
      typeNumObj: [
      ],
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '姓名',
          // width: 100,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '证件号码',
          key: 'Id_no',
          tooltip: true,
          // width: 240,
          align: 'center',
          visible: false
        },
        {
          title: '护照号',
          key: 'passport_no',
          tooltip: true,
          // width: 240,
          align: 'center',
          visible: false
        },
        {
          title: '性别',
          // width: 100,
          tooltip: true,
          key: 'sex',
          align: 'center',
          visible: false
        },
        {
          title: '年龄',
          // width: 100,
          tooltip: true,
          key: 'age',
          align: 'center',
          visible: false
        },
        {
          title: '省内城市接回',
          width: 120,
          tooltip: true,
          key: 'take_back',
          align: 'center',
          visible: false
        },
        {
          title: '航班号',
          // width: 100,
          tooltip: true,
          key: 'flight_no',
          align: 'center'
        },
        {
          title: '中转航班号',
          // width: 100,
          tooltip: true,
          key: 'connecting_flight_number',
          align: 'center'
        },
        {
          title: '中转行程',
          // width: 100,
          tooltip: true,
          key: 'transit_trip',
          align: 'center'
        },
        {
          title: '接触人员',
          // width: 100,
          tooltip: true,
          key: 'contact_personnel',
          align: 'center'
        },
        {
          title: '停留时间',
          // width: 100,
          tooltip: true,
          key: 'residence_time',
          align: 'center',
          visible: false
        },

        {
          title: '入沈时间',
          // width: 100,
          tooltip: true,
          key: 'departure_time',
          align: 'center'
        },
        {
          title: '省内转运',
          key: 'province',
          tooltip: true,
          // width: 140,
          align: 'center'
        },
        {
          title: '省外转运',
          key: 'out_province',
          tooltip: true,
          // width: 200,
          align: 'center'
        },
        {
          title: '离沈时间',
          key: 'departure_time',
          tooltip: true,
          // width: 160,
          align: 'center'
        },
        {
          title: '目的地城市',
          key: 'destination_city',
          tooltip: true,
          // width: 100,
          align: 'center'
        },
        {
          title: '航空离沈',
          key: 'aircraft',
          tooltip: true,
          // width: 100,
          align: 'center'
        },
        {
          title: '铁路离沈',
          key: 'railway',
          tooltip: true,
          // width: 100,
          align: 'center'
        },
        {
          title: '公路离沈',
          key: 'highway',
          tooltip: true,
          // width: 100,
          align: 'center'
        },
        {
          title: '交通工具班次',
          key: 'vehicle_shift',
          visible: false,
          tooltip: true,
          // width: 120,
          align: 'center'
        },
        // {
        //   title: '机舱等级',
        //   key: 'engine_room_rating',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '车厢号',
          visible: false,
          key: 'carriage_number',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '车牌号',
          visible: false,
          key: 'license_plate_number',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '座位号',
          key: 'seat_number',
          tooltip: true,
          width: 100,
          visible: false,
          align: 'center'
        },
        // {
        //   title: '二次中转站',
        //   key: 'secondary_transfer_station',
        //   tooltip: true,
        //   width: 100,
        //   align: 'center'
        // },
        // {
        //   title: '二次转运方式',
        //   key: 'secondary_transfer_mode',
        //   tooltip: true,
        //   width: 100,
        //   align: 'center'
        // },
        // {
        //   title: '二次中转班次(车)',
        //   key: 'secondary_transfer_shift',
        //   tooltip: true,
        //   width: 100,
        //   align: 'center'
        // },
        // {
        //   title: '二次中转(机舱等级(车厢号/车牌号))',
        //   key: 'secondary_engine_room_rating',
        //   tooltip: true,
        //   width: 100,
        //   align: 'center'
        // },
        {
          title: '转运接收人',
          key: 'receiver',
          visible: false,
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '车牌号码',
          key: 'license_plate',
          tooltip: true,
          width: 140,
          visible: false,
          align: 'center'
        },
        {
          title: '司机姓名',
          key: 'driver_name',
          tooltip: true,
          visible: false,
          width: 120,
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'phone_number',
          visible: false,
          tooltip: true,
          width: 160,
          align: 'center'
        }
      ],
      tableData: [],
      areaList: [],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      // 类别
      typeName: '',
      flightMap: [],
      disposalModal: false,
      disposal: '',
      flight: [
        {
          title: '国家',
          key: 'source_country'
        },
        {
          title: '航空公司',
          key: 'hangkongName'
        },
        {
          title: '机型',
          key: 'zx'
        },
        {
          title: '乘客数',
          key: 'number'
        }
      ]
    }
  },
  computed: {},
  mounted () {
    if (this.$route.query && this.$route.query.areaName) {
      this.areaName = this.$route.query.areaName
      this.$refs.statisticsBar.transportAction(this.$route.query.areaName)
    } else if (this.$route.query && this.$route.query.type) {
      this.typeName = this.$route.query.type
      this.init()
    } else {
      this.init()
    }
  },
  methods: {
    cellClickEvent (e) {
      console.log(e.row, 'e.row.flight_no')
      selectFindCount({ in_sy_code: e.row.flight_no }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.flightMap = data.data
        } else {
          this.error(data)
        }
      })
      this.disposalModal = true // 填写入沈人员处置
    },
    // 入沈人员处置提交
    disposalModalOk () {
      // alert(this.disposal)
      this.disposalModal = false
      this.disposal = ''
    },
    search (value) {
      console.log(value, '888')
      this.pageObj.pageNo = 1
      this.$refs.statisticsBar.transportAction(value.county)
      if (value.county === '全市') {
        this.init()
      } else {
        this.init(value)
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        ...data
      }
      if (this.typeName) obj['type'] = this.typeName
      this.tableLoading = true
      findzsryList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.totalnum = data.data.totalRecord
          this.tableLoading = false
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 获取类型
    getType (value) {
      if (value.type) this.typeName = value.type
      this.init()
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .sub-menu {
        background-color: #052f6b;
        color: white;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 20px;
    }
    .sub-menu>.total {
        font-size: 18px;
    }
    .sub-menu>.total>span {
        color: lightcoral;
        font-weight: 700;
        margin: 0 3px;
    }
    .btn-group {
        display: flex;
    }
    .btn-group>Button {
        margin-left: 10px;
    }
    .report-content {
        padding: 0 10px;
        height: auto;
    }
    .search-group {
        /*padding: 10px 0;*/
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .menu {
        /*border: 1px solid white;*/
        border-radius: 5px;
        padding: 8px 20px;
        font-size: 18px;
    }

    .menu-item {
        cursor: pointer;
    }
    .statistics-group {
        width: 100%;
        padding: 10px;
    }
    .statistics-group .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: white;
        border-radius: 10px;

    }
    .item-style1{
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .item-style2{
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .item-style3{
        background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
    }
    .item-style4{
        background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
    }
    .statistics-group .item .icon {
        font-size: 46px;
        color: white;
    }
    .statistics-group .item .content .txt{
        font-size: 14px;
        color: white;
        text-align: right;
    }
    .statistics-group .item .content .statistics{
        font-size: 32px;
        color: white;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .main-table {
        margin-top: -45px;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .search-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .record-num {
        margin-right: 140px;
    }
</style>
